<template>
	<view class="catyve">
		<view class="">
		<image class="caty-aimg" :src="childata.mainImages[0]" mode=""></image>
		<text style="position: absolute; top: 30rpx;font-size: 28rpx; display: inline-block;width: 40%; height: 40px;">{{childata.title}}</text>
		<span class="cate-acedc"><span class="caty-caend">价格</span>{{childata.specs[active].costPrice}}</span>
		<text style="position: absolute;top: 90px; color: #A4A4A4;font-size: 24rpx;">请选择规格、数量</text>
		</view>
		<!-- 规格按钮 -->
		<view v-for="(item,index) in childata.specs" :key="childata.specs" class="cart-caecr" @click="change(index)" :class="active==index ? 'active' : '' ">
			<u-button type="default" size="small">{{item.name}}</u-button>
		</view>
		 <view class="list-cell b-b">
		 	<text class="cell-tit">数量</text>
			<u-number-box :value="add.number" v-module="add.number" class="cell-more yticon" @plus="actehon()"  @minus="formula()"></u-number-box>
		 </view>
		<button class="caty-butace"  @click="gouwu">加入购物车</button>
	</view>
</template>

<script>   
    import Api from '@/http/api.js'
	export default{
	props: {
		// 数据源
		childata: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	data(){
		return{
			active:0,
			add:{
				commodityId:'',
				specId:'',
				holdUserId:'',
				number:1
			},
			x:{
				commodityId:'',
				specId:'',
				initSpecNumber:''
			},
		}
	},
	 methods:{
		// 规格
		change(index){
			//把index值赋给active，点击改变样式
		this.active=index;
		},
	    // 数量增加  
	    async actehon(){
	        this.add.number = this.add.number + 1
	        this.add.commodityId = this.childata.commodityId
	        this.add.specId = this.childata.specs[this.active].commoditySpecId
	        this.add.holdUserId = this.childata.holdUserId
				 const res = await Api.addition(this.add)
	 },
	      // 数量减少
	      async formula(){ 
			this.add.number = this.add.number - 1
			this.add.commodityId = this.childata.commodityId
			this.add.specId = this.childata.specs[this.active].commoditySpecId
			this.add.holdUserId = this.childata.holdUserId
			const res = await Api.subtraction(this.add)
	 },
	      // 添加购物车
		  async gouwu(){
		  	this.x.commodityId = this.childata.commodityId
		  	this.x.specId = this.childata.specs[this.active].commoditySpecId
		  	this.x.initSpecNumber = this.add.number
		  	const res = await Api.addshopping(this.x)
		  		if(res.code == 200){
		  			this.$api.msg('商品已添加至购物车');
		  			}
		  	this.$emit("onchange")
		  },
	 }
		}
</script>

<style lang="scss">
	.catyve{
		padding-left: 35rpx;
	}
	.caty-aimg{
		width: 230rpx;
		height: 230rpx;
		border-radius: 25rpx;
		margin: 30rpx 30rpx 30rpx 0rpx;
	}
	.cart-caecr{
		display: inline-block;
		margin-right: 30upx;
		margin-bottom: 20upx;
		flex: 3;
		background-color: #fff ;
		border: 1px solid #ebedf0 ;
		border-radius: 15px; 
		min-width:65px;
	}
	.active{
		border: 1px solid #ff7144 !important;
		border-radius: 15px !important;
	} 
	.u-active{  
		background-color: #fff !important;
		border-radius: 15px !important;
	}
	.cate-acedc{
		display: inline-block;
		position: absolute;
		top: 75rpx;
		background-color: #ff7144;
		color: #fff;
		font-size: 36rpx;
		border-radius: 50upx;
		padding: 2upx 20upx;
		transform: translateY(10px);       
	}
	.caty-caend{
		display: inline-block;
		font-size: 24upx !important;
		transform: translateY(-15%);
	}
	.caty-butace{
		position: absolute;
		bottom: 40rpx;
		text-align: center;   
		width: 80% !important; 
		margin-left: 10%;
		color: #fff;
		background-color: #ff7144;
		border: 1px solid #ff7144;
		font-size: 30rpx;
		border-radius: 25px !important;
	}
	// 数量加减
	.list-cell{
		display:flex;
		align-items:baseline;
		padding: 20upx $page-row-spacing;
		line-height:60upx;
		position:relative;
		background: #fff;
		justify-content: center;
		&.log-out-btn{
			margin-top: 40upx;
			.cell-tit{
				color:#A4A4A4;
				text-align: center;
				margin-right: 0;
			}
		}
		&.cell-hover{
			background:#fafafa;
		}
		&.b-b:after{
			left: 30upx;
		}
		&.m-t{
			margin-top: 16upx; 
		}
		.cell-more{
			align-self: baseline;     
			font-size:$font-lg;
			color:$font-color-light;
			margin-left:10upx;
		}
		.cell-tit{
			flex: 1; 
			font-size:25rpx;
			color: #A4A4A4;
			margin-right:10upx;
		}    
		.cell-tip{
			font-size: $font-base;
			color: $font-color-light;
		}
		switch{
			transform: translateX(16upx) scale(.84);
		}
	}
</style>